<template>
  <view class="pap-steps">
    <view
      class="pap-steps-item"
      :class="{ addPadding: item.status === 0 }"
      v-for="(item, index) in list"
      :key="index"
    >
      <view class="pap-steps-item-mark" :class="{ complated: current > index }">
        <template v-if="current <= index">
          {{ index + 1 }}
        </template>
      </view>
      <view class="pap-steps-item-title">{{ item.date }}</view>
      <view class="pap-steps-item-desc">
        <view class="flex">
          <view> 验收人：{{ item.acceptor }} </view>
          <view> 运输方量：{{ item.transport }} </view>
        </view>
        <view class="flex align-center">
          <view> 结果： </view>
          <view class="qualified" :class="{ error: item.status === 0 }">{{
            ['不合格', '合格'][item.status]
          }}</view>
        </view>
        <view class="flex align-center error" v-if="item.status === 0">
          {{ item.remark }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default' // 'default' | 'arrow' | 'dot' | 'navigation'
    },
    direction: {
      type: String,
      default: 'horizontal' // 'horizontal' | 'vertical'
    },
    current: {
      type: [String, Number],
      default: 0
    },
    status: {
      type: String,
      default: 'process' // 'wait' | 'process' | 'finish' | 'error'
    },
    list: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.pap-steps {
  .pap-steps-item {
    position: relative;
    padding: 0 0 32rpx 62rpx;

    &::before,
    &::after {
      content: '';
      position: absolute;
    }

    // &::before {
    //   left: 0;
    //   top: 0;
    //   width: 44rpx;
    //   height: 44rpx;
    //   border-radius: 50%;
    //   background: rgba(0, 82, 217, 1);
    // }

    &::after {
      top: 60rpx;
      bottom: 10rpx;
      left: 21rpx;
      width: 2rpx;
      background-color: rgba(0, 82, 217, 1);
    }

    &:last-child {
      &::after {
        display: none;
      }
    }

    &.addPadding {
      padding-bottom: 62rpx;
    }

    .pap-steps-item-mark {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      color: #fff;
      background: rgba(0, 82, 217, 1);

      &.complated {
        background: rgba(242, 243, 255, 1);

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          width: 10rpx;
          height: 20rpx;
          border: solid rgba(0, 82, 217, 1);
          border-width: 0 4rpx 4rpx 0;
          transform: translate(-50%, -50%) rotate(45deg);
        }
      }
    }

    .pap-steps-item-title {
      line-height: 44rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(52, 56, 63, 1);
    }

    .pap-steps-item-desc {
      font-size: 28rpx;
      color: rgba(78, 89, 105, 1);

      .flex {
        column-gap: 80rpx;
        margin: 24rpx 0 20rpx;

        &.align-center {
          column-gap: 10rpx;
        }
      }

      .qualified {
        padding: 2rpx 12rpx;
        color: rgba(0, 136, 88, 1);
        background: rgba(0, 136, 88, 0.1);
        border: 2rpx solid rgba(0, 136, 88, 1);
        border-radius: 6rpx;

        &.error {
          color: rgba(213, 73, 65, 1);
          background: rgba(213, 73, 65, 0.1);
          border: 2rpx solid rgba(213, 73, 65, 1);
        }
      }
    }

    .error {
      column-gap: 0 !important;
      margin: 0 !important;
      padding: 10rpx 24rpx;
      font-size: 24rpx;
      color: rgba(52, 56, 63, 1);
      background: rgba(255, 240, 237, 1);
      border-radius: 6rpx;
    }
  }
}
</style>
